<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书查询熔断器测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css">
    <style>
        .card {
            margin-bottom: 20px;
        }
        .result-container {
            max-height: 500px;
            overflow-y: auto;
        }
        .book-item {
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
        .book-item:last-child {
            border-bottom: none;
        }
        .status-badge {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="container py-4">
        <h1 class="mb-4">
            <i class="fas fa-book-reader text-primary me-2"></i>
            图书查询熔断器测试
        </h1>
        
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            本页面用于测试图书查询的服务降级功能。当后端服务不可用时，系统将返回默认的图书信息。
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-search me-2"></i>
                        测试选项
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="queryType" class="form-label">查询类型</label>
                            <select id="queryType" class="form-select">
                                <option value="byId">根据ID查询单本图书</option>
                                <option value="all">查询所有图书</option>
                                <option value="search">根据关键字搜索图书</option>
                                <option value="category">根据分类查询图书</option>
                            </select>
                        </div>
                        
                        <div id="idParam" class="mb-3">
                            <label for="bookId" class="form-label">图书ID</label>
                            <input type="number" id="bookId" class="form-control" value="1" min="1">
                        </div>
                        
                        <div id="keywordParam" class="mb-3 d-none">
                            <label for="keyword" class="form-label">关键字</label>
                            <input type="text" id="keyword" class="form-control" placeholder="输入搜索关键字">
                        </div>
                        
                        <div id="categoryParam" class="mb-3 d-none">
                            <label for="category" class="form-label">分类</label>
                            <input type="text" id="category" class="form-control" placeholder="输入图书分类">
                        </div>
                        
                        <button id="testBtn" class="btn btn-primary">
                            <i class="fas fa-play me-2"></i>
                            执行测试
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <i class="fas fa-clipboard-list me-2"></i>
                        测试结果
                        <span id="resultStatus" class="badge bg-secondary float-end">等待测试</span>
                    </div>
                    <div class="card-body">
                        <div id="loading" class="text-center py-5 d-none">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">请求处理中，请稍候...</p>
                        </div>
                        
                        <div id="resultContainer" class="result-container">
                            <div class="alert alert-secondary">
                                <i class="fas fa-info-circle me-2"></i>
                                点击"执行测试"按钮开始测试
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-4">
            <a th:href="@{/}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>
                返回首页
            </a>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const queryTypeSelect = document.getElementById('queryType');
            const idParamDiv = document.getElementById('idParam');
            const keywordParamDiv = document.getElementById('keywordParam');
            const categoryParamDiv = document.getElementById('categoryParam');
            const testBtn = document.getElementById('testBtn');
            const resultStatus = document.getElementById('resultStatus');
            const resultContainer = document.getElementById('resultContainer');
            const loading = document.getElementById('loading');
            
            // 根据查询类型显示/隐藏参数输入框
            queryTypeSelect.addEventListener('change', function() {
                const queryType = this.value;
                
                idParamDiv.classList.add('d-none');
                keywordParamDiv.classList.add('d-none');
                categoryParamDiv.classList.add('d-none');
                
                switch (queryType) {
                    case 'byId':
                        idParamDiv.classList.remove('d-none');
                        break;
                    case 'search':
                        keywordParamDiv.classList.remove('d-none');
                        break;
                    case 'category':
                        categoryParamDiv.classList.remove('d-none');
                        break;
                }
            });
            
            // 执行测试
            testBtn.addEventListener('click', function() {
                const queryType = queryTypeSelect.value;
                let url = '';
                
                // 构建请求URL
                switch (queryType) {
                    case 'byId':
                        const bookId = document.getElementById('bookId').value;
                        url = `/books/circuit-breaker/book/${bookId}`;
                        break;
                    case 'all':
                        url = '/books/circuit-breaker/books';
                        break;
                    case 'search':
                        const keyword = document.getElementById('keyword').value;
                        url = `/books/circuit-breaker/books/search?keyword=${encodeURIComponent(keyword)}`;
                        break;
                    case 'category':
                        const category = document.getElementById('category').value;
                        url = `/books/circuit-breaker/books/category?category=${encodeURIComponent(category)}`;
                        break;
                }
                
                // 显示加载状态
                resultStatus.textContent = '请求中';
                resultStatus.className = 'badge bg-warning float-end';
                resultContainer.innerHTML = '';
                loading.classList.remove('d-none');
                
                // 发送请求
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        loading.classList.add('d-none');
                        
                        if (data.success) {
                            resultStatus.textContent = '成功';
                            resultStatus.className = 'badge bg-success float-end';
                        } else {
                            resultStatus.textContent = '失败';
                            resultStatus.className = 'badge bg-danger float-end';
                        }
                        
                        // 渲染结果
                        renderResult(data, queryType);
                    })
                    .catch(error => {
                        loading.classList.add('d-none');
                        resultStatus.textContent = '错误';
                        resultStatus.className = 'badge bg-danger float-end';
                        
                        resultContainer.innerHTML = `
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                请求发生错误: ${error.message}
                            </div>
                        `;
                    });
            });
            
            // 渲染测试结果
            function renderResult(data, queryType) {
                let html = '';
                
                if (data.success) {
                    if (queryType === 'byId') {
                        // 单本图书结果
                        const book = data.book;
                        html = `
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">${book.title}</h5>
                                    <span class="badge bg-${book.availableQuantity > 0 ? 'success' : 'danger'} status-badge">
                                        ${book.availableQuantity > 0 ? '可借阅' : '已借完'}
                                    </span>
                                </div>
                                <div class="card-body">
                                    <p><strong>作者:</strong> ${book.author}</p>
                                    <p><strong>出版社:</strong> ${book.publisher || '未知'}</p>
                                    <p><strong>ISBN:</strong> ${book.isbn}</p>
                                    <p><strong>分类:</strong> ${book.category}</p>
                                    <p><strong>描述:</strong> ${book.description}</p>
                                    <p><strong>库存:</strong> ${book.availableQuantity}/${book.quantity}</p>
                                </div>
                            </div>
                        `;
                    } else {
                        // 图书列表结果
                        const books = data.books || [];
                        
                        if (books.length === 0) {
                            html = `
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-circle me-2"></i>
                                    未找到匹配的图书
                                </div>
                            `;
                        } else {
                            html = `
                                <div class="alert alert-success mb-3">
                                    <i class="fas fa-check-circle me-2"></i>
                                    共找到 ${books.length} 本图书
                                </div>
                            `;
                            
                            books.forEach(book => {
                                html += `
                                    <div class="book-item">
                                        <h5>${book.title}</h5>
                                        <p class="text-muted mb-1">作者: ${book.author}</p>
                                        <p class="mb-1">分类: ${book.category} | ISBN: ${book.isbn}</p>
                                        <p class="mb-0">${book.description}</p>
                                    </div>
                                `;
                            });
                        }
                    }
                } else {
                    // 错误结果
                    html = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            ${data.message}
                        </div>
                    `;
                    
                    if (data.error) {
                        html += `
                            <div class="alert alert-secondary">
                                <strong>错误类型:</strong> ${data.error}
                            </div>
                        `;
                    }
                }
                
                resultContainer.innerHTML = html;
            }
        });
    </script>
</body>
</html> 